<template>
  <div
    class="box"
    v-loading="tableHeader.length === 0"
  >
    <TurboTable
      v-if="tableHeader.length"
      ref="tableRef"
      :search-list="searchList"
      :search-option="searchOption"
      :table-header="tableHeader"
      :table-option="tableOption"
      :pagination-option="pageOption"
      @search-data="searchData"
      @check-change="checkChange"
      @handle-event="handleEvent"
    >
      <el-button
        type="primary"
        @click="openPop"
      >新增</el-button>
    </TurboTable>
  </div>
</template>

<script setup lang="ts">
import { reactive, h, ref, onMounted } from 'vue';

const tableRef = ref()

// 搜索配置项
const searchOption = reactive({
  span: 6,
  labelWidth: 120
})

const checkChange = (labels: string[]) => {
  console.log(labels);

}

// 表格配置
let tableOption = reactive({
  // tableHeight: 500,
  // hiddenSlot: false,
  isSelection: false,
  tableAttr: {
    'row-key': 'name',
    'default-expand-all': true
  },
  tableEvent: {},
  // expand: (row: any) => {
  //   return h('span', {}, row.name)
  // }
})

// 分页配置
let pageOption = reactive({
  background: true
})

const searchList = [
  {
    label: '输入框',
    prop: 'name',
    type: 'Input',
    model: '',
    events: {
      input: (value: string) => {
        if (value === '123') {
          tableRef.value.setHidden('number', false)
        } else {
          tableRef.value.setHidden('number', true)
        }
      }
    }
  },
  {
    label: '数字输入框',
    prop: 'number',
    type: 'DatePicker'
  },
  {
    label: '默认值输入框',
    prop: 'sex',
    type: 'Input',
    model: '我是默认值',
  },
  {
    label: '范围输入框',
    prop: 'leftRange,rightRange',
    type: 'NumberRange',
    model: [100, 200],
    ItemAttrs: {
      placeholder: ['start', 'end']
    }
  },
  {
    label: '下拉框',
    prop: 'sss',
    type: 'Select',
    model: '',
    option: [],
    ItemAttrs: {
      clearable: true
      // 支持Element此组件所有原生属性
    },
  },
  {
    label: '树形选择器',
    prop: 'tree',
    type: 'TreeSelect',
    model: '',
    option: [
      {
        value: '1',
        label: 'Level one 1',
        children: [
          {
            value: '1-1',
            label: 'Level two 1-1',
            children: [
              {
                value: '1-1-1',
                label: 'Level three 1-1-1',
              },
            ],
          },
        ],
      },
      {
        value: '2',
        label: 'Level one 2',
        children: [
          {
            value: '2-1',
            label: 'Level two 2-1'
          },
        ],
      },
    ],
    ItemAttrs: {
      // 是否直接选择本级
      'check-strictly': true,
      // 此属性建议设置为false
      'render-after-expand': false
      // 支持Element此组件所有原生属性
    }
  },
  {
    label: '单选框',
    prop: 'bbb',
    type: 'Radio',
    model: '',
    option: [
      { value: 888, label: '测试01' },
      { value: 555, label: '测试02' }
    ]
  },
]

let tableHeader: any = ref([])

setTimeout(() => {
  let data = [
    {
      label: '时间',
      shoe: false
    },
    // ......
  ]
  tableHeader.value = [
    {
      prop: 'date',
      label: '时间',
      ItemColumn: {
        width: '120'
        // 支持Element此组件所有原生属性
      },
      show: false
    },
    {
      prop: 'name',
      label: '姓名',
      handle: 'clickHandle'
    },
    {
      prop: 'address',
      label: '地址',
      defineCustom: (row: any) => {
        return h('span', { style: { color: 'red' } }, row.date)
      }
    },
    {
      label: '测试多级表头',
      children: [
        {
          prop: 'name2',
          label: '表头1'
        },
        {
          prop: 'name3',
          label: '表头2'
        },
      ]
    },
    {
      label: '操作',
      ItemColumn: {
        width: '140',
        align: 'center'
      },
      menuHandle: {
        max: 4,
        type: 'text',
        moreType: 'icon',
        buttonList: [
          {
            disabled: true,
            label: '详情',
            src: '/icon.png',
            handle: 'clickHandle',
            option: { type: 'danger' }
          },
          {
            label: '编辑',
            src: '/icon.png',
            handle: 'clickHandle',
            show: (row: any) => row.name2 === '111'
          },
          {
            label: '编辑1',
            src: '/icon.png',
            handle: 'clickHandle',
            disabled: true
          }
        ]
      }
    }
  ]
}, 5000);

const searchData = (data: any) => {
  console.log('查询条件', data);
  tableRef.value.setData([
    { id: 101, date: '2021-01-01收到了发货萨芬哈萨克山东科技付货款答复圣诞快乐粉红色的就发货', name: '测试101阿萨德会计法哈卡多少分山东科技繁花盛开京东方和', address: 'xxx村xxx队撒大口径绿肥红瘦大富科技和收到了匡扶汉室东方红', name2: '111菲利克斯大荆防颗粒手动阀老师贷款发放吉林省快电极法', name3: '2222收到了反馈核实东方红水电费就很烦收到回复' },
    { id: 102, date: '2021-01-01收到了发货萨芬哈萨克山东科技付货款答复圣诞快乐粉红色的就发货', name: '测试101阿萨德会计法哈卡多少分山东科技繁花盛开京东方和', address: 'xxx村xxx队撒大口径绿肥红瘦大富科技和收到了匡扶汉室东方红', name2: '111菲利克斯大荆防颗粒手动阀老师贷款发放吉林省快电极法', name3: '2222收到了反馈核实东方红水电费就很烦收到回复' },
    { id: 103, date: '2021-01-01收到了发货萨芬哈萨克山东科技付货款答复圣诞快乐粉红色的就发货', name: '测试101阿萨德会计法哈卡多少分山东科技繁花盛开京东方和', address: 'xxx村xxx队撒大口径绿肥红瘦大富科技和收到了匡扶汉室东方红', name2: '111菲利克斯大荆防颗粒手动阀老师贷款发放吉林省快电极法', name3: '2222收到了反馈核实东方红水电费就很烦收到回复' },
    { id: 104, date: '2021-01-01收到了发货萨芬哈萨克山东科技付货款答复圣诞快乐粉红色的就发货', name: '测试101阿萨德会计法哈卡多少分山东科技繁花盛开京东方和', address: 'xxx村xxx队撒大口径绿肥红瘦大富科技和收到了匡扶汉室东方红', name2: '111菲利克斯大荆防颗粒手动阀老师贷款发放吉林省快电极法', name3: '2222收到了反馈核实东方红水电费就很烦收到回复' },
    { id: 105, date: '2021-01-01收到了发货萨芬哈萨克山东科技付货款答复圣诞快乐粉红色的就发货', name: '测试101阿萨德会计法哈卡多少分山东科技繁花盛开京东方和', address: 'xxx村xxx队撒大口径绿肥红瘦大富科技和收到了匡扶汉室东方红', name2: '111菲利克斯大荆防颗粒手动阀老师贷款发放吉林省快电极法', name3: '2222收到了反馈核实东方红水电费就很烦收到回复' },
  ], 100)
}


const activeColumn = ref(true)
const openPop = () => {
  activeColumn.value = !activeColumn.value

  console.log(activeColumn.value);

  // ccc.value = false
}

const clickHandle = (row: any) => {
  console.log(row);
}

// 处理事件
const handleEvent = (evenName: string, row: any) => {
  switch (evenName) {
    case 'clickHandle':
      clickHandle(row)
      break;
    default:
      break;
  }
}

onMounted(() => {
  setTimeout(() => {
    tableRef.value.setDropDown('sss', [
      { value: 888, label: '测试01' }
    ], 888)
  }, 1000)

  // setTimeout(() => {
  //   tableRef.value.setSearchData({ name: 666 }, false, false)
  // }, 5000)
})
</script>

<style lang="scss" scoped>
.box {
  width: 1600px;
  height: 900px;
  border: 1px solid black;
  background-color: #e1e1e2;
}
</style>